<template>
	<div
		class="all-new"
		v-loading="loading"
		v-if="paperdata.paper != undefined || paperdata.paper != null"
	>
		<div class="allhead">
			<span>{{ paperdata.name }}</span>
		</div>
		<div class="totalhead">
			<!-- <div style="margin-right:30px">难度：{{paperdata.difficulty}}</div> -->
			<div>试卷时长：{{ paperdata.paper.duration }}分钟</div>
		</div>
		<div class="ftable">
			<div class="table">
				<div>
					<div class="table-top">题目</div>
					<div class="table-bottom">分值</div>
				</div>
				<div v-for="(table, tableindex) in paperdata.paper.structureList" :key="tableindex">
					<div class="table-top">{{ tableindex + 1 }}</div>
					<div class="table-bottom">{{ table.score }}</div>
				</div>
				<div>
					<div class="table-top-end">总分</div>
					<div class="table-bottom-end">{{ paperdata.paper.score }}</div>
				</div>
			</div>
		</div>
		<div v-for="(paperitem, total) in paperdata.paper.structureList" :key="total">
			<div class="paperitemhead">
				<span>{{ paperitem.name }}（{{ paperitem.score }}分）</span>
			</div>
			<div v-for="(tabledata, i) in paperitem.container" :key="i">
				<div class="oneselect-cotainer" v-if="tabledata.type == '单选题' || tabledata.type == '单项选择题'">
					<div class="oneselect-header">
						<Audio :audioUrl="tabledata.audioUrl" :isAudio="tabledata.formwork.includes('听力')" />
						<span style="font-size: 18px">{{ i + 1 }}.</span>
						<span class="type">单选</span>
						<span class="oneselect-header-title" :id="'a' + tabledata.id">{{ tabledata.smallTopic }}</span>
						<span class="score">({{ tabledata.fraction }}分)</span>
						<span v-if="tabledata.tag===0">
							<i @click="handleTag(total,i)" size="medium" class="el-icon-star-off myicon tostar"></i>
						</span>
						<span class="star" v-if="tabledata.tag===1">
							<i @click="handleTag(total,i)" size="medium" class="el-icon-star-on gold myicon tostar"></i>
						</span>
					</div>
					<el-radio-group
						v-model="tabledata.examAnswer.optiones"
						@change="
              (checked) =>
                radioChnage(checked, tabledata.examAnswer, tabledata.options)
            "
					>
						<el-radio
							class="oneselect-body"
							style="display: block"
							v-for="(item, i2) in tabledata.options"
							:key="i2"
							:label="String.fromCharCode(i2 + 65)"
						>{{ String.fromCharCode(i2 + 65) }}.{{ item.context }}</el-radio>
					</el-radio-group>
				</div>

				<div class="more-cotainer" v-if="tabledata.type == '多选题' || tabledata.type == '多项选择题'">
					<Audio :audioUrl="tabledata.audioUrl" :isAudio="tabledata.formwork.includes('听力')" />
					<div class="more-header">
						<span style="font-size: 18px">{{ i + 1 }}.</span>
						<span class="type">多选</span>
						<span class="oneselect-header-title" :id="'a' + tabledata.id">{{ tabledata.smallTopic }}</span>
						<span v-if="tabledata.tag===0">
							<i @click="handleTag(total,i)" size="medium" class="el-icon-star-off myicon tostar"></i>
						</span>
						<span class="star" v-if="tabledata.tag===1">
							<i @click="handleTag(total,i)" size="medium" class="el-icon-star-on gold myicon tostar"></i>
						</span>
					</div>
					<el-checkbox-group
						v-if="
              tabledata.examAnswer.optiones != null ||
              tabledata.examAnswer.optiones != undefined
            "
						v-model="tabledata.examAnswer.optiones"
						@change="
              (checked) =>
                checkboxChange(checked, tabledata.examAnswer, tabledata.options)
            "
					>
						<el-checkbox
							class="oneselect-body"
							style="display: block"
							v-for="(item, i2) in tabledata.options"
							:key="i2"
							:label="String.fromCharCode(i2 + 65)"
						>{{ String.fromCharCode(i2 + 65) }}.{{ item.context }}</el-checkbox>
					</el-checkbox-group>
				</div>

				<div class="bank-cotainer" v-if="tabledata.type == '填空题'">
					<Audio :audioUrl="tabledata.audioUrl" :isAudio="tabledata.formwork.includes('听力')" />
					<div class="bank-header">
						<span style="font-size: 18px">{{ i + 1 }}.</span>
						<span class="type">填空</span>
						<span class="oneselect-header-title" :id="'a' + tabledata.id">
							{{ tabledata.smallTopic }}
							<span>({{ tabledata.fraction }} 分)</span>
							<span v-if="tabledata.tag===0">
								<i @click="handleTag(total,i)" size="medium" class="el-icon-star-off myicon tostar"></i>
							</span>
							<span class="star" v-if="tabledata.tag===1">
								<i @click="handleTag(total,i)" size="medium" class="el-icon-star-on gold myicon tostar"></i>
							</span>
						</span>
					</div>
					<div class="bank-floote">
						<div class="bank-floote-answeritem">
							<div class="bank-floote-answeritem-body" style="width: 100%">
								<span
									style="width: 100%"
									class="bank-floote-answer"
									v-for="(item2, i2) in tabledata.options"
									:key="i2"
								>
									<div
										style="
                      display: flex;
                      width: 80%;
                      margin-bottom: 10px;
                      line-height: 40px;
                    "
									>
										<el-input
											style="width: 30%"
											v-model="item2.context"
											@change="
                        (val) =>
                          bankChange(
                            val,
                            tabledata.options,
                            tabledata.examAnswer
                          )
                      "
										></el-input>
										<div style="width: 60px">
											<span>({{ item2.fraction }}分)</span>
										</div>
									</div>
								</span>
							</div>
						</div>
					</div>
				</div>

				<div class="oneselect-cotainer" v-if="tabledata.type == '判断题'">
					<Audio :audioUrl="tabledata.audioUrl" :isAudio="tabledata.formwork.includes('听力')" />
					<div class="oneselect-header">
						<span style="font-size: 18px">{{ i + 1 }}.</span>
						<span class="type">判断</span>
						<span class="oneselect-header-title" :id="'a' + tabledata.id">{{ tabledata.smallTopic }}</span>
						<span class="score">({{ tabledata.fraction }}分)</span>
						<span v-if="tabledata.tag===0">
							<i @click="handleTag(total,i)" size="medium" class="el-icon-star-off myicon tostar"></i>
						</span>
						<span class="star" v-if="tabledata.tag===1">
							<i @click="handleTag(total,i)" size="medium" class="el-icon-star-on gold myicon tostar"></i>
						</span>
					</div>
					<el-radio-group
						class="oneselect-body"
						v-model="tabledata.examAnswer.optiones"
						@change="(checked) => roleChange(checked, tabledata.examAnswer)"
					>
						<el-radio label="true">正确</el-radio>
						<el-radio label="false">错误</el-radio>
					</el-radio-group>
				</div>

				<div class="brief-cotainer" v-if="tabledata.type == '简答题'">
					<Audio :audioUrl="tabledata.audioUrl" :isAudio="tabledata.formwork.includes('听力')" />
					<div class="more-header">
						<span style="font-size: 18px">{{ i + 1 }}.</span>
						<span class="type">简答</span>
						<span
							class="oneselect-header-title ql-editor"
							v-html="tabledata.smallTopic"
							:id="'a' + tabledata.id"
						></span>
						<span class="score">({{ tabledata.fraction }}分)</span>
						<span v-if="tabledata.tag===0">
							<i @click="handleTag(total,i)" size="medium" class="el-icon-star-off myicon tostar"></i>
						</span>
						<span class="star" v-if="tabledata.tag===1">
							<i @click="handleTag(total,i)" size="medium" class="el-icon-star-on gold myicon tostar"></i>
						</span>
					</div>
					<div class="brief-item">
						<el-image
							v-for="(item, index) in tabledata.imgList"
							:key="index"
							class="brief-img-detail"
							:src="item"
							:preview-src-list="tabledata.imgList"
						>></el-image>
					</div>
					<div class="brief-file">
						<div class="brief-file-down" v-for="(item, index) in tabledata.fileList" :key="index">
							<span>文件{{ index + 1 }}</span>
							<el-link target="_blank" :href="item.url" :underline="false" style="margin-left: 15px">
								<el-button size="mini" type="warning">点击下载</el-button>
							</el-link>
						</div>
						<el-input
							type="textarea"
							:rows="5"
							v-model="tabledata.examAnswer.value"
							@change="(val) => putChange(val, tabledata.examAnswer)"
							style="margin-top: 20px"
						></el-input>
					</div>
				</div>

				<div class="brief-cotainer" v-if="tabledata.type == '大题'">
					<Audio :audioUrl="tabledata.audioUrl" :isAudio="tabledata.formwork.includes('听力')" />
					<div class="more-header">
						<span style="font-size: 18px">{{ i + 1 }}.</span>
						<span class="type">大题</span>
						<span
							class="oneselect-header-title ql-editor"
							v-html="tabledata.bigQuestion"
							:id="'a' + tabledata.id"
						></span>
						<span class="score">({{ tabledata.fraction }}分)</span>
						<span v-if="tabledata.tag===0">
							<i @click="handleTag(total,i)" size="medium" class="el-icon-star-off myicon tostar"></i>
						</span>
						<span class="star" v-if="tabledata.tag===1">
							<i @click="handleTag(total,i)" size="medium" class="el-icon-star-on gold myicon tostar"></i>
						</span>
					</div>
					<div class="brief-item">
						<el-image
							v-for="(item, index) in tabledata.imgList"
							:key="index"
							class="brief-img-detail"
							:src="item"
							:preview-src-list="tabledata.imgList"
						>></el-image>
					</div>
					<div class="brief-file">
						<div class="brief-file-down" v-for="(item, index) in tabledata.fileList" :key="index">
							<span>文件{{ index + 1 }}</span>
							<el-link target="_blank" :href="item.url" :underline="false" style="margin-left: 15px">
								<el-button size="mini" type="warning">点击下载</el-button>
							</el-link>
						</div>
					</div>

					<div v-for="(item, i2) in tabledata.bankList" :key="i2">
						<div class="oneselect-cotainer" v-if="item.type == '单选题' || item.type == '单项选择题'">
							<div class="oneselect-header">
								<span style="font-size: 18px">({{ i2 + 1 }})</span>
								<span class="type">单选</span>
								<span class="oneselect-header-title">{{ item.smallTopic }}</span>
								<span class="score">({{ item.fraction }}分)</span>
								<!-- <span v-if="tabledata.tag===0"><i @click="handleTag(total,i)" size="medium" class="el-icon-star-off myicon" ></i></span>
								<span v-if="tabledata.tag===1"><i @click="handleTag(total,i)" size="medium"  class="el-icon-star-on gold myicon" ></i></span>-->
							</div>
							<el-radio-group
								v-model="item.examAnswer.optiones"
								@change="
                  (checked) =>
                    radioChnage(checked, item.examAnswer, item.options)
                "
							>
								<el-radio
									class="oneselect-body"
									style="display: block"
									v-for="(item2, i3) in item.options"
									:key="i3"
									:label="String.fromCharCode(i3 + 65)"
								>{{ String.fromCharCode(i3 + 65) }}.{{ item2.context }}</el-radio>
							</el-radio-group>
						</div>

						<div class="more-cotainer" v-if="item.type == '多选题' || item.type == '多项选择题'">
							<div class="more-header">
								<span style="font-size: 18px">({{ i2 + 1 }})</span>
								<span class="type">多选</span>
								<span class="oneselect-header-title">{{ item.smallTopic }}</span>
								<span class="score">({{ item.fraction }}分)</span>
								<span v-if="tabledata.tag===0">
									<i @click="handleTag(total,i)" size="medium" class="el-icon-star-off myicon tostar"></i>
								</span>
								<span class="star" v-if="tabledata.tag===1">
									<i @click="handleTag(total,i)" size="medium" class="el-icon-star-on gold myicon tostar"></i>
								</span>
							</div>
							<el-checkbox-group
								v-model="item.examAnswer.optiones"
								@change="
                  (checked) =>
                    checkboxChange(checked, item.examAnswer, item.options)
                "
							>
								<el-checkbox
									class="oneselect-body"
									style="display: block"
									v-for="(item2, i3) in item.options"
									:key="i3"
									:label="String.fromCharCode(i3 + 65)"
								>{{ String.fromCharCode(i3 + 65) }}.{{ item2.context }}</el-checkbox>
							</el-checkbox-group>
						</div>

						<div class="oneselect-cotainer" v-if="item.type == '判断题'">
							<div class="oneselect-header">
								<span style="font-size: 18px">({{ i2 + 1 }})</span>
								<span class="type">判断</span>
								<span class="oneselect-header-title">{{ item.smallTopic }}</span>
								<span class="score">({{ item.fraction }}分)</span>
								<span v-if="tabledata.tag===0">
									<i @click="handleTag(total,i)" size="medium" class="el-icon-star-off myicon tostar"></i>
								</span>
								<span class="star" v-if="tabledata.tag===1">
									<i @click="handleTag(total,i)" size="medium" class="el-icon-star-on gold myicon tostar"></i>
								</span>
							</div>

							<el-radio-group
								class="oneselect-body"
								v-model="item.examAnswer.optiones"
								@change="(checked) => roleChange(checked, item.examAnswer)"
							>
								<el-radio label="true">正确</el-radio>
								<el-radio label="false">错误</el-radio>
							</el-radio-group>
						</div>

						<div class="bank-cotainer" v-if="item.type == '填空题'">
							<div class="bank-header">
								<span style="font-size: 18px">({{ i2 + 1 }})</span>
								<span class="type">填空</span>
								<span class="oneselect-header-title">{{ item.smallTopic }}</span>
								<span>({{ item.fraction }}分)</span>
								<!-- <span v-if="tabledata.tag===0"><i @click="handleTag(total,i)" size="medium" class="el-icon-star-off myicon" ></i></span>
								<span v-if="tabledata.tag===1"><i @click="handleTag(total,i)" size="medium"  class="el-icon-star-on gold myicon" ></i></span>-->
							</div>
							<div class="bank-floote">
								<div class="bank-floote-answeritem">
									<div class="bank-floote-answeritem-body">
										<span class="bank-floote-answer" v-for="(item2, i4) in item.options" :key="i4">
											<!-- {{ item2.answer }} -->
											<el-input
												v-model="item2.context"
												@change="
                          (val) =>
                            bankChange(val, item.options, item.examAnswer)
                        "
											></el-input>
										</span>
									</div>
								</div>
							</div>
						</div>

						<div class="brief-cotainer" v-if="item.type == '简答题'">
							<div class="more-header">
								<span style="font-size: 18px">({{ i2 + 1 }})</span>
								<span class="type">简答</span>
								<span class="oneselect-header-title ql-editor" v-html="item.smallTopic"></span>
								<span class="score">({{ item.fraction }}分)</span>
								<span v-if="tabledata.tag===0">
									<i @click="handleTag(total,i)" size="medium" class="el-icon-star-off myicon tostar"></i>
								</span>
								<span class="star" v-if="tabledata.tag===1">
									<i @click="handleTag(total,i)" size="medium" class="el-icon-star-on gold myicon tostar"></i>
								</span>
							</div>
							<div class="brief-item">
								<el-image
									v-for="(item2, index2) in item.imgList"
									:key="index2"
									class="brief-img-detail"
									:src="item2"
									:preview-src-list="item.imgList"
								>></el-image>
							</div>
							<div class="brief-file">
								<div class="brief-file-down" v-for="(item2, index2) in item.fileList" :key="index2">
									<span>文件{{ index2 + 1 }}</span>
									<el-link target="_blank" :href="item2.url" :underline="false" style="margin-left: 15px">
										<el-button size="mini" type="warning">点击下载</el-button>
									</el-link>
								</div>
								<el-input
									type="textarea"
									:rows="5"
									v-model="item.examAnswer.value"
									@change="(val) => putChange(val, item.examAnswer)"
									style="margin-top: 20px"
								></el-input>
							</div>
						</div>
					</div>
				</div>

				<div class="bank-cotainer" v-if="tabledata.type == '选词填空题'">
					<div class="bank-header">
						<span style="font-size: 18px">{{ i + 1 }}.</span>
						<span class="type">选词填空</span>
						<span
							class="oneselect-header-title word_content ql-editor"
							ref="word_content"
							v-html="tabledata.smallTopic"
							:id="'a' + tabledata.id"
						></span>
					</div>
				</div>

				<div class="kong"></div>
			</div>
		</div>
	</div>
</template>

<script>
import { search } from '@/api/topic/showDetail'
import Vue from 'vue'
import { getPaper, getExamPaper, updateAnswer } from '@/api/paper/paper'
import Audio from '@/components/showDetail/Audio.vue'

export default {
	name: 'showpaper',
	components: {
		Audio,
	},
	props: {
		row: {
			type: Object,
			default: () => {
				return {}
			},
		},
	},

	data() {
		return {
			// 遮罩层
			paperdata: [],
			mypaperdata: [],
			loading: true,
			exhead: 'http://10.168.100.154' + process.env.VUE_APP_BASE_API,
			container: [],
			showimgList: [],
			imgurl: '',
			showfileList: [],
			// 选词填空字符串
			choiceString: '',
			beanName: '',
			pointptions: [
				{
					label: '对',
					value: true,
				},
				{
					label: '错',
					value: false,
				},
			],
			options: [
				{
					answer: 'sdsada',
					fraction: 2,
				},
				{
					answer: 'sdsada',
					fraction: 2,
				},
				{
					answer: 'sdsada',
					fraction: 2,
				},
			],
			choiceTimer: null,
		}
	},
	created() {
		this.getpaperdetail()
	},
	mounted() {
		//  this.handleSelect();
	},

	methods: {
		//选词填空题
		handleSelect: function () {
			console.log('handleSelect函数开始***********************')
			let selectBox = document.querySelectorAll('.selectBox')
			// console.log("selectBox: ",selectBox);
			let BoxLength = selectBox.length

			let id = selectBox[0].getAttribute('id').split('*')
			let optionLen =
				this.paperdata.paper.structureList[parseInt(id[0])].container[parseInt(id[1])].options
					.length

			console.log(
				'options: ',
				this.paperdata.paper.structureList[parseInt(id[0])].container[parseInt(id[1])].options
			)
			console.log(
				'examAnswer: ',
				this.paperdata.paper.structureList[parseInt(id[0])].container[parseInt(id[1])].examAnswer
					.value
			)

			for (let i = 0; i < BoxLength; i++) {
				// 对每个选择框增加change事件，当考生点击后监听考生选取的答案传递给后端
				selectBox[i].addEventListener('change', (event) => {
					let answer = ''
					let table = null
					// console.log("selectbox选择框发生了改变",i,event,id);
					// select选择框的内容发生了改变，应该获取改变的值。将考生最新选择的值赋值为蓝色
					for (let k = 0; k < optionLen; k++) {
						// 为最新选择的值增加opselect类
						if (selectBox[i].options[k].value === selectBox[i].value) {
							selectBox[i].options[k].setAttribute('class', 'opselect')
						} else {
							// 将所有有opselect的类清除掉
							selectBox[i].options[k].classList.remove('opselect')
						}
					}

					selectBox.forEach((ele, index) => {
						answer += `${ele.value}^^`
					})
					let answerLength = answer.length
					answer = answer.slice(0, answerLength - 2)
					// console.log(answer);
					this.paperdata.paper.structureList[parseInt(id[0])].container[
						parseInt(id[1])
					].examAnswer.value = answer
					table =
						this.paperdata.paper.structureList[parseInt(id[0])].container[parseInt(id[1])]
							.examAnswer
					// console.log(table);
					updateAnswer(table).then((res) => {
						console.log(res)
						this.$message({
							showClose: true,
							duration: 1000,
							message: '保存成功',
							type: 'success',
						})
					})
				})

				//回显学生之前选的答案

				// console.log("options: ",this.paperdata.paper.structureList[parseInt(id[0])].container[parseInt(id[1])].options);
				for (let j = 0; j < optionLen; j++) {
					let val =
						this.paperdata.paper.structureList[parseInt(id[0])].container[parseInt(id[1])]
							.examAnswer.value[i]
					let opt =
						this.paperdata.paper.structureList[parseInt(id[0])].container[parseInt(id[1])].options[
							j
						].context

					// 原始答案
					if (val === '__') {
						selectBox[i].options[0].selected = true
						break
					}
					if (val === opt) {
						// console.log("找到正确选项");
						// console.log("val:",val,"opt: ",opt);
						selectBox[i].options[j + 1].selected = true
						selectBox[i].options[j + 1].setAttribute('class', 'opselect')
						// console.log("selectBox: ",selectBox[i].options[j+1]);
						break
					}
				}
			}
		},

		// 收藏题目的更改
		handleTag(total, i) {
			let tagData = []
			tagData.push(total)
			tagData.push(i)
			this.$emit('fahandleTag', tagData)
		},

		getpaperdetail() {
			// console.log('传过来的数据', this.row)
			this.paperdata = this.row
			console.log('paperdata----: ', this.paperdata)
			// this.tagPaperdata(this.paperdata);
			if (this.row.length == 0) {
				getExamPaper({
					examineeId: this.row.examineeId,
					sessionId: this.row.sessionId,
					paperId: this.row.paperId,
				}).then((res) => {
					this.paperdata = res
					console.log('paperdata***: ', this.paperdata)
				})
			}
			setTimeout(() => {
				this.getdetailescore()
				this.gosearch()
			}, 1000)
		},
		//处理大题总分
		getdetailescore() {
			for (
				let t = 0;
				this.paperdata.paper.structureList !== null &&
				t < this.paperdata.paper.structureList.length;
				t++
			) {
				this.paperdata.paper.structureList[t].score = 0
				for (
					let k = 0;
					this.paperdata.paper.structureList[t].bankList !== null &&
					k < this.paperdata.paper.structureList[t].bankList.length;
					k++
				) {
					this.paperdata.paper.structureList[t].score +=
						this.paperdata.paper.structureList[t].bankList[k].fraction
				}
			}
		},
		gosearch() {
			let that = this
			console.log(this.paperdata.paper.structureList)
			for (let t = 0; t < this.paperdata.paper.structureList.length; t++) {
				this.paperdata.paper.structureList[t].container =
					this.paperdata.paper.structureList[t].bankList

				// 处理选词填空题的输入框显示
				if (this.paperdata.paper.structureList[t].beanName == 'bankedClozeServiceImpl') {
					for (let k = 0; k < this.paperdata.paper.structureList[t].container.length; k++) {
						let options = '<option id="op00"  value="__" >请选择</option>'

						// 将从后端获取的字符串形式的答案，处理为数组形式的答案
						let len =
							this.paperdata.paper.structureList[t].container[k].examAnswer.value == null
								? 0
								: this.paperdata.paper.structureList[t].container[k].examAnswer.value.length
						let type = typeof this.paperdata.paper.structureList[t].container[k].examAnswer.value
						console.log('type: ', type)
						console.log(
							'slice: ',
							this.paperdata.paper.structureList[t].container[k].examAnswer.value
						)
						if (type === 'string') {
							this.paperdata.paper.structureList[t].container[k].examAnswer.value =
								this.paperdata.paper.structureList[t].container[k].examAnswer.value
									.slice(0, len - 2)
									.split('^^')
							console.log(
								'处理后slice: ',
								this.paperdata.paper.structureList[t].container[k].examAnswer.value
							)
						}

						console.log('选词填空处理：', this.paperdata.paper.structureList[t].container[k])

						this.paperdata.paper.structureList[t].container[k].options.forEach((ele, index) => {
							options += `<option id="op${index}" value="${ele.context}" >${ele.context}</option>`
						})
						// console.log("option: ",options);

						// console.log("选择框的个数： ", this.paperdata.paper.structureList[t].container[k].smallTopic.match(/AS\w\d/g));
						// this.paperdata.paper.structureList[t].container[k].smallTopic = this.paperdata.paper.structureList[t].container[k].smallTopic.replace(/AS\w\d/g,
						//     ` <select class="selectBox" id="${t}*${k}" value="bid"  style="font-size: 17px;width: max-content;">
						//         ${options}
						//       </select>`
						//   );

						this.paperdata.paper.structureList[t].container[k].smallTopic =
							this.paperdata.paper.structureList[t].container[k].smallTopic.replaceAll(
								/AS\w\d/g,
								` <select class="selectBox" id="${t}*${k}" value="bid"  style="font-size: 17px;width: max-content;">
                    ${options}
                  </select>`
							)

						// console.log("完形填空： ",this.paperdata.paper.structureList[t].container[k].smallTopic = this.paperdata.paper.structureList[t].container[k].smallTopic);
					}
				}

				//填空题处理
				if (this.paperdata.paper.structureList[t].beanName == 'completionServiceImpl') {
					for (let k = 0; k < this.paperdata.paper.structureList[t].container.length; k++) {
						console.log(
							this.paperdata.paper.structureList[t].container[k].examAnswer.value,
							'填空题'
						)
						if (this.paperdata.paper.structureList[t].container[k].examAnswer.value != null) {
							let template = that.paperdata.paper.structureList[t].container[k].examAnswer.value
							for (
								let p = 0;
								p < this.paperdata.paper.structureList[t].container[k].options.length;
								p++
							) {
								this.paperdata.paper.structureList[t].container[k].options[p].context = template[p]
							}
						}
					}
				}

				if (this.paperdata.paper.structureList[t].container != null) {
					for (let j = 0; j < this.paperdata.paper.structureList[t].container.length; j++) {
						//   多选模型
						this.paperdata.paper.structureList[t].container[j].multipleFraction = []
						//处理简答题和大题的图片
						if (
							this.paperdata.paper.structureList[t].container[j].beanName ==
								'shortAnswerServiceImpl' ||
							this.paperdata.paper.structureList[t].container[j].beanName ==
								'bigQuestionServiceImpl'
						) {
							this.paperdata.paper.structureList[t].container[j].imgList = []
							this.paperdata.paper.structureList[t].container[j].fileList = []
							let imgtemplatedata = []
							let filetemplatedata = []
							if (this.paperdata.paper.structureList[t].container[j].fileUrl) {
								filetemplatedata =
									this.paperdata.paper.structureList[t].container[j].fileUrl.split(',')
								for (let k = 0; k <= filetemplatedata.length - 2; k++) {
									const data = {
										url: this.exhead + filetemplatedata[k],
										name: filetemplatedata[k],
									}
									this.paperdata.paper.structureList[t].container[j].fileList[k] = data
								}
							}

							if (this.paperdata.paper.structureList[t].container[j].imgUrl) {
								imgtemplatedata =
									this.paperdata.paper.structureList[t].container[j].imgUrl.split(',')
								for (let k = 0; k <= imgtemplatedata.length - 2; k++) {
									this.paperdata.paper.structureList[t].container[j].imgList[k] =
										this.exhead + imgtemplatedata[k]
								}
							}
						}

						//大题内简答题的图片和文件处理,大题内填空题处理
						if (this.paperdata.paper.structureList[t].container[j].bankList != null) {
							for (
								let h = 0;
								h < this.paperdata.paper.structureList[t].container[j].bankList.length;
								h++
							) {
								//填空题处理部分
								if (
									this.paperdata.paper.structureList[t].container[j].bankList[h].beanName ==
									'completionServiceImpl'
								) {
									if (
										this.paperdata.paper.structureList[t].container[j].bankList[h].examAnswer
											.value != null
									) {
										// console.log( this.paperdata.paper.structureList[t].container[j].bankList[h].examAnswer.value);

										let templaarr =
											this.paperdata.paper.structureList[t].container[j].bankList[h].examAnswer
												.value
										// for(let q=0;q<this.paperdata.paper.structureList[t].container[j].bankList[h]){
										for (
											let w = 0;
											w <
											this.paperdata.paper.structureList[t].container[j].bankList[h].options.length;
											w++
										) {
											this.paperdata.paper.structureList[t].container[j].bankList[h].options[
												w
											].context = templaarr[w]
										}
									}

									// }
								}
								// 简答题处理部分
								if (
									this.paperdata.paper.structureList[t].container[j].bankList[h].beanName ==
									'shortAnswerServiceImpl'
								) {
									this.paperdata.paper.structureList[t].container[j].bankList[h].imgList = []
									this.paperdata.paper.structureList[t].container[j].bankList[h].fileList = []
									let imgtemplatedata = []
									let filetemplatedata = []

									if (this.paperdata.paper.structureList[t].container[j].bankList[h].fileUrl) {
										filetemplatedata =
											this.paperdata.paper.structureList[t].container[j].bankList[h].fileUrl.split(
												','
											)
										for (let k = 0; k <= filetemplatedata.length - 2; k++) {
											const data = {
												url: this.exhead + filetemplatedata[k],
												name: filetemplatedata[k],
											}
											this.paperdata.paper.structureList[t].container[j].bankList[h].fileList[k] =
												data
										}
									}
									if (this.paperdata.paper.structureList[t].container[j].bankList[h].imgUrl) {
										imgtemplatedata =
											this.paperdata.paper.structureList[t].container[j].bankList[h].imgUrl.split(
												','
											)
										for (let k = 0; k <= imgtemplatedata.length - 2; k++) {
											this.paperdata.paper.structureList[t].container[j].bankList[h].imgList[k] =
												this.exhead + imgtemplatedata[k]
										}
									}
								}
							}
						}
						// 处理多项
						if (
							this.paperdata.paper.structureList[t].container[j].type == '多项选择题' &&
							this.paperdata.paper.structureList[t].container[j].examAnswer.optiones != null
						) {
							this.paperdata.paper.structureList[t].container[j].examAnswer.optiones =
								this.paperdata.paper.structureList[t].container[j].examAnswer.optiones.split('^^')
						} else if (
							this.paperdata.paper.structureList[t].container[j].type == '多项选择题' &&
							this.paperdata.paper.structureList[t].container[j].examAnswer.optiones == null
						) {
							//   没有选择置空数组
							this.paperdata.paper.structureList[t].container[j].examAnswer.optiones = []
						}

						// 处理大题多选
						if (
							this.paperdata.paper.structureList[t].container[j].beanName ==
							'bigQuestionServiceImpl'
						) {
							this.bigMuch(this.paperdata.paper.structureList[t].container[j])
						}
					}
				}
			}
			//  this.container = this.row.bankList
			this.loading = false
			setTimeout(() => {
				console.log('对后端返回的数据处理完毕')
				// this.selectOption()
				this.handleSelect()
			}, 1500)
		},
		//  selectOption(e) {
		//   let select = document.querySelectorAll('.selectBox')
		//   let answer = ''
		//   select.forEach((ele, index) => {
		//     answer += `${ele.value},`
		//   })
		//   console.log(answer);
		// },

		// 处理大题多选
		bigMuch(arr) {
			for (let i = 0; i < arr.bankList.length; i++) {
				if (arr.bankList[i].beanName == 'multipleChoiceServiceImpl') {
					if (arr.bankList[i].examAnswer.optiones != null) {
						arr.bankList[i].examAnswer.optiones = arr.bankList[i].examAnswer.optiones.split('^^')
					} else if (arr.bankList[i].examAnswer.optiones == null) {
						arr.bankList[i].examAnswer.optiones = []
					}
				}
			}
		},
		download(data) {
			//  let url=data.filename;
			// this.download(data);
			//  this.download(this.showfileList[data].url)
		},
		// 处理单选
		radioChnage(val, obj, table) {
			for (let i = 0; i < table.length; i++) {
				table[i].opt = String.fromCharCode(i + 65)
				if (table[i].opt == val) {
					obj.value = table[i].context
				}
			}
			updateAnswer(obj).then((res) => {
				console.log(res)
				this.$message({
					showClose: true,
					duration: 1000,
					message: '保存成功',
					type: 'success',
				})
			})
		},
		// 处理多选
		checkboxChange(val, item, table) {
			let tmp = []
			for (let i = 0; i < table.length; i++) {
				table[i].opt = String.fromCharCode(i + 65)
				for (let k = 0; k < val.length; k++) {
					if (table[i].opt == val[k]) {
						tmp.push(table[i].context)
					}
				}
			}
			item.value = tmp.join('^^')
			let obj = JSON.stringify(val)
			let map = JSON.stringify(item)
			let objct = JSON.parse(map)
			objct.optiones = JSON.parse(obj).join('^^')
			updateAnswer(objct).then((res) => {
				console.log(res)
				this.$message({
					showClose: true,
					duration: 1000,
					message: '保存成功',
					type: 'success',
				})
			})
		},
		// 判断题
		roleChange(val, item) {
			updateAnswer(item).then((res) => {
				console.log(res)
				this.$message({
					showClose: true,
					duration: 1000,
					message: '保存成功',
					type: 'success',
				})
			})
		},
		// 简答题
		putChange(val, item) {
			console.log('putChange:', item)
			updateAnswer(item).then((res) => {
				console.log(res)
				this.$message({
					showClose: true,
					duration: 1000,
					message: '保存成功',
					type: 'success',
				})
			})
		},
		//填空题
		bankChange(val, item, table) {
			console.log('val: ', val)
			console.log('options: ', item)
			console.log('examAnswer: ', table)
			table.value = ''
			for (let i = 0; i < item.length; i++) {
				if (i == 0) {
					if (item[i].context == '' || item[i].context == null) {
						table.value = ''
					} else {
						table.value = item[i].context
					}
				} else {
					if (item[i].context == '' || item[i].context == null) {
						table.value = table.value + '^^'
					} else {
						table.value = table.value + '^^' + item[i].context
					}
				}
			}
			console.log('table: ', table)
			updateAnswer(table).then((res) => {
				console.log(res)
				this.$message({
					showClose: true,
					duration: 1000,
					message: '保存成功',
					type: 'success',
				})
			})
		},
	},
}
</script>

<style lang="scss">
.tostar {
	margin-left: 10px;
}
.all-new {
	padding: 0 15px;
}
.ftable {
	margin-bottom: 50px;
}
.kong {
	width: 100%;
	height: 5px;
}
.totalhead {
	display: flex;

	justify-content: center;
	width: 50%;
	margin-left: 50%;
	transform: translateX(-50%);
	font-size: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
}
.rule {
	font-size: 18px;
	font-weight: 500;
	color: #909399;
}
.all {
	width: 100%;
	height: 100%;
	padding: 0 50px;
	/* background-color: #E4E7ED; */
}
.box {
	padding-top: 30px;
	margin-left: 10px;
	margin-right: 10px;
}
.allhead {
	text-align: center;
	color: #303133;
	font-size: 40px;
	font-weight: 600;
}
.oneselect-header-title {
	font-size: 18px;
	color: #303133;
}
.type {
	font-size: 16px;
	color: #67c23a;
	border: 1px solid #67c23a;
	margin-right: 10px;
}
.body-chose1 {
	color: #67c23a;
}
.body-chose2 {
	color: #f56c6c;
}
.score {
	color: #909399;
	margin-left: 5px;
}
.answer {
	font-size: 18px;
	color: #67c23a;
}
.oneselect-cotainer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0;
}
.oneselect-header,
.more-header {
	font-size: 16px;
	color: #303133;
	margin-top: 30px;
}
.oneselect-header > span,
.more-header > span {
	line-height: 30px;
	vertical-align: top;
}
.oneselect-header .type,
.more-header > span {
	display: inline-block;
	line-height: 20px;
	padding: 0 2px;
	font-size: 12px;
	margin-top: 5px;
	margin-left: 5px;
}
.oneselect-header .star,
.more-header .star {
	margin-left: 10px;
}
.oneselect-body {
	margin-top: 0;
	margin-left: 20px;
	padding-top: 15px;
	padding-bottom: 15px;
	font-size: 18px;
	border-bottom: 1px dashed #dcdfe6;
	color: #303133;
}
.oneselect-body:first-child {
	margin-top: 10px;
}
.oneselect-floote {
	margin-top: 10px;
	padding-bottom: 10px;
	font-size: 18px;
	color: #67c23a;
	border-bottom: 1px dashed #dcdfe6;
}
.oneselect-floote-answer {
	margin-top: 10px;
	padding-bottom: 10px;
	font-size: 18px;
	color: #303133;
	border-bottom: 1px dashed #dcdfe6;
}
.more-cotainer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 40px;
	margin-bottom: 40px;
}
.more-header {
	font-size: 16px;
	color: #303133;
}
.more-body {
	margin-top: 10px;
	margin-left: 10px;
	font-size: 18px;
	color: #303133;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #dcdfe6;
}
.more-floote {
	margin-top: 10px;
	font-size: 18px;
	padding-bottom: 10px;
	color: #67c23a;
	border-bottom: 1px dashed #dcdfe6;
}
.more-floote-answer {
	margin-top: 10px;
	font-size: 18px;
	padding-bottom: 10px;
	border-bottom: 1px dashed #dcdfe6;
	color: #303133;
}
.bank-cotainer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 40px;
	margin-bottom: 40px;
}
.bank-header {
	font-size: 16px;
	color: #303133;
}
.bank-body {
	margin-top: 10px;
	margin-left: 10px;
	font-size: 18px;
	color: #303133;
	border-bottom: 1px dashed #dcdfe6;
}
.bank-floote {
	margin-top: 20px;
	color: #303133;
	border-bottom: 1px dashed #dcdfe6;
}
.bank-floote-answer {
	margin-left: 10px;
	color: #303133;
}
.bank-floote-answeritem {
	display: flex;
	font-size: 18px;
	color: #303133;
	padding-bottom: 10px;
	border-bottom: 1px dashed #dcdfe6;
}
.bank-floote-answeritem-body {
	display: flex;
	flex-direction: column;
	margin-left: 5px;
}
.bank-floote-explains {
	display: block;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 18px;
	color: #67c23a;
}
.judge-chose {
	margin-top: 15px;
	padding-bottom: 10px;
	display: flex;
	border-bottom: 1px dashed #dcdfe6;
	color: #303133;
}
.myicon {
	font-size: 30px;
}
.gold {
	color: gold;
}
.judge-chose-item {
	margin-left: 20px;
	font-size: 18px;
	color: #303133;
}
.brief-cotainer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0;
}
.judge-floote {
	margin-top: 10px;
	padding-bottom: 10px;
	font-size: 18px;
	color: #67c23a;
	border-bottom: 1px dashed #dcdfe6;
}
.judge-floote-answeritem {
	margin-top: 10px;
	padding-bottom: 10px;
	font-size: 18px;
	color: #303133;
	border-bottom: 1px dashed #dcdfe6;
}
.brief-header {
	font-size: 16px;
	color: #303133;
}
.brief-body {
	margin-top: 20px;
	margin-left: 10px;
	padding-bottom: 10px;
	font-size: 18px;
	color: #303133;
	border-bottom: 1px dashed #dcdfe6;
}
.brief-floote {
	margin-top: 20px;
	padding-bottom: 20px;
	margin-left: 10px;
	font-size: 18px;
	color: #67c23a;
	border-bottom: 1px dashed #dcdfe6;
}
.brief-item {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.brief-img-detail {
	width: 200px;
	height: 200px;
	margin-top: 20px;
	margin-bottom: 20px;
	border: 1px solid #e4e7ed;
}
.brief-file {
	display: flex;
	flex-direction: column;
	margin-left: 20px;
	justify-content: center;
	color: #909399;
}
.brief-file-down {
	font-size: 18px;
	margin-top: 20px;
}
.paperitemhead {
	color: #303133;
	font-size: 20px;
	font-weight: 500;
	margin-top: 50px;
}
.table {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #606266;
}
.table-top {
	width: 80px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-weight: 550;
	border-top: 1px solid #dcdfe6;
	border-left: 1px solid #dcdfe6;
	border-bottom: 1px solid #dcdfe6;
}
.table-top-end {
	width: 80px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-weight: 550;
	border: 1px solid #dcdfe6;
}
.table-bottom {
	width: 80px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	border-left: 1px solid #dcdfe6;
	border-bottom: 1px solid #dcdfe6;
}
.table-bottom-end {
	width: 80px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	border-left: 1px solid #dcdfe6;
	border-bottom: 1px solid #dcdfe6;
	border-right: 1px solid #dcdfe6;
}
.opselect {
	color: #1890ff;
}
</style>
